<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>动态路由匹配</title>
</head>

<body>
  <div id="app">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/user/foo/profile">Go to Profile</router-link>
      <router-link to="/user/foo/posts">Go to Posts</router-link>
      <router-link to="/user/bar">Go to Bar</router-link>
    </p>

    <router-view></router-view>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    const User = {
      template: `
        <div class="user">
          <h2>User {{ $route.params.id }}</h2>
          <router-view></router-view>
        </div>
      `
    }

    const UserHome = {
      template: `<div>Home</div>`
    }

    const UserProfile = {
      template: `<div>Profile</div>`
    }

    const UserPosts = {
      template: `<div>Posts</div>`
    }

    const router = new VueRouter({
      routes: [{
        path: '/user/:id',
        component: User,
        children: [
          // 当 /user/:id 匹配成功，
          // UserHome 会被渲染在 User 的 <router-view> 中
          {
            path: '',
            component: UserHome
          },
          {
            // 当 /user/:id/profile 匹配成功，
            // UserProfile 会被渲染在 User 的 <router-view> 中
            path: 'profile',
            component: UserProfile
          },
          {
            // 当 /user/:id/posts 匹配成功
            // UserPosts 会被渲染在 User 的 <router-view> 中
            path: 'posts',
            component: UserPosts
          }
        ]
      }]
    })

    const app = new Vue({
      router
    }).$mount('#app')
  </script>
</body>

</html>
